<template>
  <div class="demo">
    <div class="demo-title">自定义触发字符</div>
    <div class="demo-content">
      <Mentions
        v-model:value="value"
        placeholder="input @ to mention people, # to mention tag"
        :prefix="['@', '#']"
        @search="onSearch"
      >
        <Mentions.Option v-for="val in options" :key="val" :value="val">
          {{ val }}
        </Mentions.Option>
      </Mentions>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import Mentions from '@sscd/mentions';
  const MOCK_DATA: Record<string, string[]> = {
    '@': ['afc163', 'zombiej', 'yesmeck'],
    '#': ['1.0', '2.0', '3.0'],
  };
  const value = ref<string>('');
  const prefix = ref<string>('@');
  const options = computed(() => MOCK_DATA[prefix.value] || []);
  const onSearch = (_: string, val: string) => {
    console.log(_, val);
    prefix.value = val;
  };
</script>

<style lang="less" scoped></style>
